Flex 絵文字ビルダーの裏側

Flex 絵文字ビルダー というのを作りました。

SlackやDiscordにカスタム絵文字として登録して、リアクションに使う画像を生成するツールです。こんな画像を作れます。

仕組み

最初はこんなツールを作るつもりではなく、 どっかで<svg> 要素の中にHTMLを記述して、画像を <img> 要素に表示する、というコードを見かけて、自分で実験するためのコードでした。

こんな感じで <svg> を作っておいて、

<svg id="svg">
  <foreignObject width="128px" height=
1